<template>
    <i :class="classes" :style="styles" @click="handleClick"></i>
</template>
<script>
    import {iconicData} from'../../data/iconicData.js';
    export default {
        name: 'Icon',
        props: {
            type: {
                type: String,
                default: 'add'
            },
            transform:{
                type:Boolean,
                default:false
            },
            size: [Number, String],
            color: String,
            custom: {
                type: String,
                default: ''
            }
        },
        computed: {
            classes () {
                //是否用户自定义 true为自定义，this.type为cclassName值
                if(!this.transform){
                    let reg = new RegExp(this.type + '$')
                    let filtersAttr=iconicData.filter((v)=>{
                        return reg.test(v)
                    })
                    if(!filtersAttr.length){
                        console.error('Cannot find icon for'+this.type)
                    }
                }
                
                return [
                    [{
                        [`ion ${this.type}`]:!this.transform,
                        [`${this.type}`]:this.transform
                    }]
                ];
            },
            styles () {
                let style = {};

                if (this.size) {
                    style['font-size'] = `${this.size}px`;
                }

                if (this.color) {
                    style.color = this.color;
                }

                return style;
            }
        },
        methods: {
            handleClick (event) {
                this.$emit('click', event);
            }
        }
    };
</script>
